<template>
  <div id="app" :class="{ 'admin-root': isAdminPage, 'merchant-root': isMerchantPage }">
    <!-- 路由出口 -->
    <Header v-if="showHeaderFooter"></Header>
    <router-view></router-view>
    <Sidebar v-if="showSidebar"></Sidebar>
    <Footer v-if="showHeaderFooter"></Footer>
  </div>
</template>

<script setup>
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import Footer from './components/Footer.vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

// 使用组合式API
const route = useRoute()
const isAdminPage = computed(() => route.path.startsWith('/jiang'))
const isMerchantPage = computed(() => route.path.startsWith('/merchant'))

// 计算属性：判断是否显示Header和Footer
const showHeaderFooter = computed(() => {
  // 在登录、注册、后台页面、商家后台页面不显示Header和Footer
  const hideHeaderFooterRoutes = ['/login', '/register']
  if (isAdminPage.value || isMerchantPage.value) return false
  return !hideHeaderFooterRoutes.includes(route.path)
})

// 计算属性：判断是否显示Sidebar
const showSidebar = computed(() => {
  // 在登录、注册、结算、后台页面、商家后台页面不显示Sidebar
  const hideSidebarRoutes = ['/login', '/register', '/checkout']
  if (isAdminPage.value || isMerchantPage.value) return false
  return !hideSidebarRoutes.includes(route.path)
})
</script>

<style>
.app {
  width: 100%;
  min-height: 100vh;
}

.merchant-root {
  background-color: #f8f4e8;
}
</style>